<div style="padding:20px;">
	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
	<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>



	<!-- bootstrap / 轮播图 start-->
	<!-- 文档地址 https://getbootstrap.net/docs/components/carousel/ -->
	<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" style="">
		<ol class="carousel-indicators">
		  <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
		  <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
		  <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
		</ol>
		<div class="carousel-inner">
		  <div class="carousel-item active" style="width: 100%;height: 100%">
		    <img src="http://b-ssl.duitang.com/uploads/blog/201505/18/20150518025109_Lfmcx.jpeg" class="d-block w-100" alt="..." style="width: 100%;height: 100%">
		    <div class="carousel-caption d-none d-md-block">
		      <h5>First slide label</h5>
		      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
		    </div>
		  </div>
		  <div class="carousel-item">
		    <img src="http://img3.imgtn.bdimg.com/it/u=2208162519,4010854312&fm=26&gp=0.jpg" alt="..." style="width: 100%;height: 100%">
		    <div class="carousel-caption d-none d-md-block" >
		      <h5>Second slide label</h5>
		      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
		    </div>
		  </div>
		  <div class="carousel-item">
		    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2472153115,3034378969&fm=26&gp=0.jpg" class="d-block " alt="..." style="width: 100%;height: 100%">
		    <div class="carousel-caption d-none d-md-block">
		      <h5>Third slide label</h5>
		      <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
		    </div>
		  </div>
		</div>
		<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
		  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
		  <span class="sr-only">Previous</span>
		</a>
		<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
		  <span class="carousel-control-next-icon" aria-hidden="true"></span>
		  <span class="sr-only">Next</span>
		</a>
	</div>
	
	<script type="text/javascript">
		//轮播图图片项监听
		$('.carousel-item').click(function(){
			console.log($(this).index());
			//dosomething
		});
	</script>
	<!-- bootstrap / 轮播图 end-->

</div>


	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
	<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>



	<!-- bootstrap / 卡片 start-->
	<!-- 文档地址 https://getbootstrap.net/docs/components/card/ -->
	<div class="card" style="width: 18rem;margin: 10px auto">
		<!-- 设置图片或头像 -->
	  <img class="card-img-top" src="http://b-ssl.duitang.com/uploads/blog/201505/18/20150518025109_Lfmcx.jpeg" alt="Card image cap">
	  <div class="card-body">
	  	<!-- 标题 -->
	    <h5 class="card-title">Card title</h5>
	    <!-- 内容 -->
	    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
	    <!-- 按钮 -->
	    <a href="#" class="btn btn-primary">Go somewhere</a>
	  </div>
	</div>

	<script type="text/javascript">
		//获取按钮组件
		var cardbtn=$('.card-body .btn');
		cardbtn.click(function(){
			//dosomething
			console.log($(this).html());
		})
	</script>
	<!-- bootstrap / 卡片 end-->

    	<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
	<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>



	<!-- bootstrap / 列表 start-->
	<!-- 文档地址 https://getbootstrap.net/docs/components/list-group/ -->
	<ul class="list-group">
	  <li class="list-group-item active">Cras justo odio</li>
	  <li class="list-group-item">Dapibus ac facilisis in</li>
	  <li class="list-group-item">Morbi leo risus</li>
	  <li class="list-group-item">Porta ac consectetur ac</li>
	  <li class="list-group-item">Vestibulum at eros</li>
	</ul>
	
	<script type="text/javascript">
		//获取列表项
		var list=$('.list-group .list-group-item');
		//列表点击事件
		list.click(function(){
			console.log($(this).index());
			//利用addClass()、removeClass()来控制当前点击项的样式。
			//siblings()可获取当前点击项的其他兄弟元素
			//$(this).addClass('active')
			//$(this).siblings().removeClass('active');
		})
	</script>
	<!-- bootstrap / 列表 end-->	<link href="https://cdn.bootcdn.net/ajax/libs/weui/0.4.3/style/weui.min.css" rel="stylesheet">
	<link href="https://cdn.bootcdn.net/ajax/libs/jquery-weui/1.2.1/css/jquery-weui.min.css" rel="stylesheet">
	<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery-weui/0.8.3/js/jquery-weui.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>



	<!-- weui / 列表 start-->	
	<!-- 组件文档 "http://old.jqweui.com/components#cell"-->
	<div class="weui_cells weui_cells_access">
	  <a class="weui_cell" href="javascript:;">
	    <div class="weui_cell_hd">
	      <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
	    </div>
	    <div class="weui_cell_bd weui_cell_primary">
	      <p>cell standard</p>
	    </div>
	    <div class="weui_cell_ft">
	      说明文字
	    </div>
	  </a>
	  <a class="weui_cell" href="javascript:;">
	    <div class="weui_cell_hd">
	      <img src="" alt="icon" style="width:20px;margin-right:5px;display:block">
	    </div>
	    <div class="weui_cell_bd weui_cell_primary">
	      <p>cell standard</p>
	    </div>
	    <div class="weui_cell_ft">
	      说明文字
	    </div>
	  </a>
	</div>
	
	<script type="text/javascript">
		//项事件监听
		$('.weui_cells .weui_cell').click(function(){
			console.log($(this).index());
		})
	</script>
	<!-- weui / 列表 end-->	
		<link href="https://cdn.bootcdn.net/ajax/libs/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
	<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/amazeui/2.7.2/js/amazeui.min.js"></script>


	
	<!-- amazeui / 列表 start-->
	<!-- 文档地址 http://amazeui.shopxo.net/css/list/ -->
	<ul class="am-list">
	  <li><a href="#">每个人都有一个死角， 自己走不出来，别人也闯不进去。</a></li>
	  <li><a href="#">我把最深沉的秘密放在那里。</a></li>
	  <li><a href="#">你不懂我，我不怪你。</a></li>
	  <li><a href="#">每个人都有一道伤口， 或深或浅，盖上布，以为不存在。</a></li>
	</ul>
	
	<script type="text/javascript">
		 //获取item元素
		 var item=$('.am-list li');
		 item.click(function(){
		 	console.log($(this).index());
		 })
		 
	</script>
	<!-- amazeui / 列表 end-->